<template>
	<view class="global">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar
					title="我的订单"  />
	<view class="tabs">
		<view class="tabitem" @click="check(index)" :style="ac == index? 'color:rgb(0, 122, 255)':''" v-for="item,index in list">
			{{item}}
		</view>
	</view>
	<view style="padding: 20rpx;">
				<view class="box" v-for="item in ordersList" :key="item.id" style="margin-bottom: 10rpx;">
					<view style="display: flex;align-items: baseline;margin-bottom: 10rpx;">
						<navigator :url="'/pages/detail/detail?id='+item.id"
							style="flex: 1;font-size: 32rpx;">
							{{item.orderNo}}
							<uni-icons type="right" size="16" color="#666"
								style="position: relative;top: 2rpx;"></uni-icons>
						</navigator>
						<view style="font-size: 24rpx;">
							{{item.status}}
						</view>
					</view>
					<view style="display: flex;align-items: center;grid-gap: 20rpx;margin-bottom: 10rpx;"
						@click="goOrdersItem(item.id)">
						<view>
							<image style="display: block;width: 160rpx;height: 160rpx;border-radius: 10rpx;"
								:src="item.cover"></image>
						</view>
						<view style="flex: 1;">{{item.name}}</view>
						<view>实付￥<text style="font-size: 36rpx;font-weight: bold;color: red;">{{item.actual}}</text>
						</view>
					</view>
					<view style="display: flex;min-height: 40rpx;">
						<view style="flex: 1;">
							<view v-if="item.status==='已取消'||item.status==='已完成'||item.status==='已退款'"
								@click="del(item.id)">
								<uni-icons type="trash" size="16" color="#666"
									style="position: relative;top: 2rpx;"></uni-icons>
								<text style="font-size: 24rpx;color: #666;">删除</text>
							</view>
						</view>
						<view style="flex: 1;text-align: right;">
							<uni-tag v-if="item.status==='待支付'" text="支付" type="primary" size="mini" inverted
								@click="changeStatus(item,'待发货')"></uni-tag>
							<uni-tag v-if="item.status==='待发货'" text="申请退款" type="error" size="mini" inverted
								@click="changeStatus(item,'已退款')"></uni-tag>
							<uni-tag v-if="item.status==='待收货'" text="确认收货" type="warning" size="mini" inverted
								@click="changeStatus(item,'待评价')"></uni-tag>
							<uni-tag v-if="item.status==='待评价'" text="评价" type="royal" size="mini"
								@click="goComment(item)"></uni-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	
		import $H from '../../utils/request.js';
	export default {
		data() {
			return {
				ac:0,
				list:["全部","进行中","待评价","已退款"],
				ordersList:[{
					id:1
				}],
				user:{}
			}
		},
		onShow() {
			this.user = uni.getStorageSync("userinfo");
		this.getlist()	
		},
		methods: {
			goComment(item){
				uni.navigateTo({
					url:`/pages/comment/comment?busid=${item.businessId}&&id=`+item.id
				})
			},
			getlist(){
				$H.post(`order/all?userId=${this.user.id}&&status=`+this.list[this.ac]).then(res=>{
					console.log(res)
					this.ordersList=res
				})
			},
			del(id){
				$H.post("order/delete?id="+id).then(res=>{
					this.getlist()
				})
			 	
			},
			changeStatus(item ,a){
				$H.post("order/update",{
					id:item.id,
					status:a
				}).then(res=>{
					console.log(res)
					this.getlist()
				})
			},
			goOrdersItem(){
				
			},
			check(index){
				this.ac=index
				this.getlist()
			}
		}
	}
</script>

<style scoped>
	.tabitem{
		width: 25%;
		height: 100%;
		text-align: center;
		font-size: 14px;
		line-height: 50px;
		float: left;
	}

.global{
	width: 100%;
	height: 100%;
	background: #e5e5e5;
}
.tabs{
	width: 100%;
	height: 50px;
	background: #fff;
}
.box{
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
}
</style>
